<template>
    <div>
      <table align="center" border="1">
        <tr>
          <th>序号</th>
          <th>商品名称</th>
          <th>商品价格</th>
          <th>购买数量</th>
          <th>操作</th>
        </tr>
        <tr v-for="(i,index) in goods" :key="index">
          <td>{{index+1}}</td>
          <td>{{i.name}}</td>
          <td>{{i.price}}</td>
          <td>
            <button @click="i.num -=1">-</button>
            {{i.num}}
            <button @click="i.num +=1">+</button>
          </td>
          <td>
            <button @click="dels(index)">移除</button>
          </td>
        </tr>
      </table>
      总计：￥ {{sums}}
    </div>
</template>

<script>
    export default {
        name: 'Goods',
      data:function () {
        return{
          goods:[
            {'name':'iphone 8','price':5099,'num':10},
            {'name':'iphone XS','price':8699,'num':8},
            {'name':'iphone XR','price':6499,'num':6},
            {'name':'iphone 11','price':5499,'num':3},
            {'name':'iphone 11ProMax','price':9599,'num':1},
          ]
        }
      },
      methods:{
          dels(index){
            this.goods.splice(index,1)
          }
      },
      computed:{
          sums:function () {
            let total = 0;
            for(let i=0;i<this.goods.length;i++){
              total += this.goods[i].num * this.goods[i].price
            }
            return total
          }
      }
    }
</script>

<style scoped>
  table{
        width: 750px;
        height: 350px;
        text-align: center;
        align-self: auto;
        align-content: center;
    }
</style>

